<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
    <meta charset="UTF-8">  
    <title>前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态</title>  
    <style>  
    body,html{height:100%;}  
    #div_pannel{height:800px;}  
    *{margin:0;padding:0;}  
      
    #menu{padding:10px 0 0 10px;}  
    #menu a{color:#333;}  
    #menu a.crent{color:#ff0000;}  
    #div_tab{background:#fff url(http://www.86y.org/images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;}  
    #div_tab li{float:left;text-align:center;position:relative;list-style:none;}  
      
    #div_tab li{background:url(http://www.86y.org/images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}  
    #div_tab li span{background:url(http://www.86y.org/images/t_tab_uselectbg.gif);height:23px;line-height:23px;}  
      
    #div_tab li.crent{background:url(http://www.86y.org/images/t_tab_selectbg.gif);margin-top:2px;height:24px;}  
    #div_tab li.crent span{background:url(http://www.86y.org/images/t_tab_selectbg.gif);height:24px;line-height:24px;}  
      
    #div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;}    
    #div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}  
      
    #div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}  
    #div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}  
    #div_tab li .win_close,#div_tab li.crent .win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(http://www.86y.org/images/t_delete_ico.gif) no-repeat;}        
    #div_tab li .win_close{background-position:0 -14px;}  
    #div_tab li .win_close:hover{background-position:0 0;}  
      
    .clearfix:after {content:"."; display:block;height:0;clear:both; visibility:hidden;}   
    *html .clearfix{height:1%;}  
    *+html .clearfix{height:1%;}  
    .clearfix{display:inline-block;}   
    /* Hide from IE Mac */   
    .clearfix {display:block;}  
    </style>  
    <script type="text/javascript">  
        function CreateDiv(tabid, url, name)  
         {  
            setacrent(tabid);  
            ///如果当前tabid存在直接显示已经打开的tab  
            if (document.getElementById("div_" + tabid) == null)  
            {  
                //创建iframe  
                var box = document.createElement("iframe");  
                box.id = "div_" + tabid;  
                box.src = url;  
                box.height = "100%";  
                box.frameBorder = 0;  
                box.width = "100%";  
                document.getElementById("div_pannel").appendChild(box);  
          
                //遍历并清除开始存在的tab当前效果并隐藏其显示的div  
                var tablist = document.getElementById("div_tab").getElementsByTagName('li');  
                var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');  
                if (tablist.length > 0)  
                {  
                    for (i = 0; i < tablist.length; i++)  
                    {  
                        tablist[i].className = "";  
                        pannellist[i].style.display = "none";  
                    }  
                }  
          
                //创建li菜单  
                var tab = document.createElement("li");  
                tab.className = "crent";  
                tab.id = tabid;  
                var litxt = "<span><a href=\"javascript:;\" onclick=\"javascript:CreateDiv('" + tabid + "','" + url + "','" + name + "')\" title=" + name + " class=\"menua\">" + name + "</a><a onclick=\"RemoveDiv('" + tabid + "')\" class=\"win_close\" title=\"关闭当前窗口\"><a></span>";  
                tab.innerHTML = litxt;  
                document.getElementById("div_tab").appendChild(tab);  
            }  
            else  
            {  
                var tablist = document.getElementById("div_tab").getElementsByTagName('li');  
                var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');  
                //alert(tablist.length);  
                for (i = 0; i < tablist.length; i++)  
                {  
                    tablist[i].className = "";  
                    pannellist[i].style.display = "none"  
                }  
                document.getElementById(tabid).className = "crent";  
                document.getElementById("div_" + tabid).style.display = "block";  
            }  
        }  
        function setacrent(obj){  
            var alists=document.getElementById("menu").getElementsByTagName("a");  
            for(var i=0;i<alists.length;i++)  
            {  
                if(alists[i].rel==obj)  
                    alists[i].className="crent";  
                else  
                    alists[i].className="";  
            }  
              
        }  
        function RemoveDiv(obj)  
         {  
            var ob = document.getElementById(obj);  
            ob.parentNode.removeChild(ob);  
            var obdiv = document.getElementById("div_" + obj);  
            obdiv.parentNode.removeChild(obdiv);  
            var tablist = document.getElementById("div_tab").getElementsByTagName('li');  
            var pannellist = document.getElementById("div_pannel").getElementsByTagName('iframe');  
            if (tablist.length > 0)  
            {  
                tablist[tablist.length - 1].className = 'crent'  
                pannellist[tablist.length - 1].style.display = 'block'  
            }         
        }  
    </script>  
</head>  
<body>  
<div id="menu"><a href="javascript:;" rel="bing" onclick="CreateDiv('bing','http://www.bing.com','必应')">必应</a>  <a href="javascript:;" rel="cnblogs" onclick="CreateDiv('cnblogs','http://www.cnblogs.com','博客园')">博客园</a>  <a href="javascript:;" rel="ok22" onclick="CreateDiv('ok22','http://www.86y.org','幸凡在线学习网')">幸凡在线学习网</a></div>  
    <ul class="clearfix" id="div_tab"></ul>  
    <div id="div_pannel"></div>  
</body>  
</html> 